<template>
  <view class="container">
    <!-- 售后订单标题 -->
    <view class="header">
      <text>售后订单</text>
    </view>

    <!-- 售后订单展示区域 -->
    <view v-for="(order, index) in afterSaleOrders" :key="index" class="shop-item">
      <view class="status-text">{{ getStatusText(order.orderState) }}</view>
      <view class="good">
        <image :src="order.images" mode="aspectFill" class="shop-img"></image>
        <view class="shop-text">
          <view class="order-info">
            <view class="order-id">订单号：{{ order.orderId }}</view>
            <view class="order-price">￥{{ (order.orderPrice * order.orderCount).toFixed(2) }}</view>
          </view>
          <view class="order-name">{{ order.orderName }}</view>
        </view>
        <view class="order-quantity">X {{ order.orderCount }}</view>
      </view>
    </view>

    <!-- 未找到订单提示 -->
    <view v-if="afterSaleOrders.length === 0" class="shop-else-list">暂无售后订单</view>
  </view>
</template>

<script>
import config from '@/config.js';

export default {
  data() {
    return {
      afterSaleOrders: []
    };
  },
  methods: {
    fetchAfterSaleOrders() {
      // 请求后端获取订单状态为-1、-2、-3的订单
      uni.request({
        url: `${config.apiUrl}/order/getAfterSaleOrders`,
        method: 'GET',
        success: (response) => {
          if (response.data && response.data.length > 0) {
            this.afterSaleOrders = response.data;
          } else {
            uni.showToast({
              title: '暂无售后订单',
              icon: 'none'
            });
          }
        },
        fail: (error) => {
          console.error('获取售后订单请求失败', error);
          uni.showToast({
            title: '请求失败，请重试',
            icon: 'none'
          });
        }
      });
    },
    getStatusText(state) {
      switch (state) {
        case "-1":
          return '取消';
        case "-2":
          return '退货处理中';
        case "-3":
          return '退货完成';
        default:
          return '未知状态';
      }
    }
  },
  created() {
    this.fetchAfterSaleOrders();
  }
};
</script>

<style>
.container {
  padding-bottom: 100rpx;
  background-color: #ffffff;
  height: 100%;
}

.header {
  padding: 20rpx;
  background-color: #f5f5f5;
  font-size: 30rpx;
  text-align: center;
  color: #333;
  border-bottom: 1px solid #e5e5e5;
}

.shop-else-list {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 18rpx;
}

.shop-item {
  display: flex;
  flex-direction: column;
  padding: 30rpx;
  background-color: #f5f5f5;
  margin: 20rpx 0;
  border-radius: 15rpx;
  position: relative; /* 新增此行以便能够绝对定位状态文本 */
}

.status-text {
  position: absolute;
  top: -15rpx;
  right: 30rpx;
  color: #ff6600;
  font-size: 16rpx;
}

.good {
  display: flex;
  align-items: center;
  margin-top: 15rpx;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15rpx;
}

.shop-img {
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 10rpx;
}

.shop-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.order-info {
  display: flex;
  justify-content: space-between;
}

.order-id {
  font-size: 18rpx;
  color: #333;
}

.order-price {
  font-size: 18rpx;
  color: #333;
}

.order-name {
  font-size: 20rpx;
  color: #333;
}

.order-quantity {
  text-align: right;
  font-size: 18rpx;
  color: #666;
}
</style>
